<template>
  <div class="heardInfor-wrap">
    <div class="overMEN">
      <div class="heardInfor"></div>
    </div>
    <div class="nav-tab-wrap">
      <div class="tabCollect">
        <span v-for="item in list" @click="tabsInfo(item.id)">{{
          item.app
        }}</span>
      </div>

      <!-- 倒计时 -->
      <el-progress class="meneyGiftime" type="circle" :width='50'  :percentage="count"></el-progress>

      <h2 class="exp-wrap" v-if="!conMon">EXP +20</h2>
      <div class="main-wrap-info">
        <div class="main-wrap-left">
          <div class="infoCarf">
            <img :src="avatars" />
            <p>{{ uname }}</p>
            <span
              >等级：<b>Lv.{{ lv }}</b></span
            >
            <div class="jindutiao-wrap">
              <el-progress
                :text-inside="true"
                :stroke-width="20"
                :percentage="exp"
              ></el-progress>
            </div>
            <span>邮箱：{{ email }}</span>
            <span>个性签名：{{ qianming || qianmings }}</span>
          </div>

          <div class="taskCardAll">
            <!-- 任务卡 -->
            <taskCard></taskCard>
          </div>
          <div style="text-align: center">
            <audio
              autoplay
              controls
              src="https://huazizhanye.oss-cn-beijing.aliyuncs.com/Alec%20Benjamin-Let%20Me%20Down%20Slowly.mp3"
            ></audio>
          </div>
        </div>
        <div class="main-wrap-right">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 用户请求
import sessionLogin from "../../http/session";
// 任务卡
import taskCard from "../Mycenter/taskCard.vue";
export default {
  name: "WorkspaceJsonHeardinfo",

  data() {
    return {
      conMon: true,
      list: [
        {
          id: 1,
          app: "我的窝",
        },
        {
          id: 2,
          app: "我的游记",
        },
        {
          id: 3,
          app: "我的订单",
        },
        {
          id: 4,
          app: "我的收藏",
        },
      ],
      value :'',
      avatars: "",
      uname: "",
      email: "",
      qianming: "",
      qianmings: "主人很懒，什么也没写喔！",
      lv: "1",
      exp: 1,
      count: 100,
      timer: null,
    };
  },
  components: {
    taskCard,
  },

  mounted() {
    //查询当前登录状态的用户信息
    sessionLogin().then((res) => {
      this.avatars = res.data.data[0].avatar;
      this.uname = res.data.data[0].uname;
      this.qianming = res.data.data[0].qianming;
      this.email = res.data.data[0].email;
      this.exp = res.data.data[0].exp;
      this.lv = res.data.data[0].lv;
    });

    // 进入页面调用计时器
    this.timers()
  },

  methods: {
    // 倒计时
    timers() {
         const TIME_COUNT = 100;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              clearInterval(this.timer);
              this.timer = null;
              this.count = "";
            }
          }, 300);
        }
       },

    tabsInfo(id) {
      if (id == 1) {
        this.$router.push("/Mycenter/info");
      } else if (id == 2) {
        this.$router.push("/Mycenter/notes");
      } else if (id == 3) {
        this.$router.push("/Mycenter/order");
      } else if (id == 4) {
        this.$router.push("/Mycenter/collect");
      }
    },

    // 经验清0
    clearMen() {
      this.$http
        .post("/expIszieo", {
          uname: this.uname,
        })
        .then((res) => {
          this.$message({
            message: res.data.message,
            type: "success",
          });
        });
    },
    // 金币
    conMons() {
      this.conMon = false;
      this.$http
        .post("/updataexpIstrue", {
          exp: 20,
          uname: this.uname,
        })
        .then((res) => {
          this.$message({
            message: res.data.message,
            type: "success",
          });
          // 刷新用户信息
          sessionLogin().then((result) => {
            console.log(result);
            if (result.data.data[0].exp >= 100) {
              this.clearMen();
              history.go(0);
            }
          });
        });

      setTimeout(() => {
        this.conMon = true; 
      }, 5000);

    },
  },
  watch:{
    exp(news,olds){
      // console.log(news,olds);
    },
    count(news,olds){
        // console.log(news,olds);
        if(news<=0){
          this.count=100
          this.exp+=20
          this.conMons()
        }
    }
  }
};
</script>

<style lang="scss" scoped>
.heardInfor-wrap {
  margin-top: 70px;
  width: 100%;
  min-height: 1200px;
  .heardInfor:hover {
    transform: scale(1.1);
    overflow: hidden;
  }
  .heardInfor {
    overflow: hidden;
    transition: all 1s;
    background-image: linear-gradient(
      rgb(73, 175, 243) 10%,
      rgb(255, 255, 255) 100%
    );
    background: url("https://b1-q.mafengwo.net/s17/M00/8B/5D/CoUBXl_7JoWAXw50AAm_HEHbaj409.jpeg?imageMogr2%2Fstrip")
      no-repeat;
    background-size: cover;
    width: 100%;
    height: 300px;
  }
  .nav-tab-wrap {
    width: 100%;
    height: 58px;
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom: #d6d6d6 1px solid;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    .tabCollect {
      width: 1200px;
      height: 58px;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-weight: bold;
      > span:nth-child(1) {
        margin-left: 400px;
      }
      > span:hover {
        color: #41c1ec;
        cursor: pointer;
      }
    }
    .main-wrap-info {
      width: 1200px;
      margin: 3px auto;
      /* background: rgb(94, 211, 231); */
      display: flex;
      justify-content: space-between;
      .main-wrap-left {
        width: 400px;
        min-height: 800px;
        background: rgb(255, 255, 255);
        .infoCarf {
          width: 100%;
          height: 400px;
          /* background: #41c1ec; */
          text-align: center;
          > img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-top: -50px;
          }
          > p {
            margin: 15px 0;
            font-weight: bold;
            font-size: 25px;
          }
          > span {
            color: rgb(0, 0, 0);
            display: block;
            margin-top: 30px;
            > b {
              color: red;
            }
          }
          > :nth-child(6) {
            color: #41c1ec;
          }
          .jindutiao-wrap {
            padding: 30px 50px;
          }
        }
      }
      .main-wrap-right {
        padding: 20px;
        box-sizing: border-box;
        width: 750px;
        min-height: 800px;
        background: rgb(255, 255, 255);
      }
    }
  }
}
.taskCardAll {
  padding: 30px;
  width: 390px;
  height: 300px;
}
.meneyGif {
  width: 100px;
  cursor: pointer;
  transform: rotate(-90deg);
  position: absolute;
  top: 300px;
  left: 80px;
}
.meneyGiftime{
  color: #41c1ec;
  font-size: 30px;
  position: absolute;
  top: 375px;
  left: 80px;
}

.overMEN {
  overflow: hidden;
  height: 300px;
  position: relative;
}
.exp-wrap {
  color: #ffffff;
  position: absolute;
  top: 300px;
  left: 80px;
}
</style>